<script setup lang='ts'>
import {onMounted,ref} from 'vue'
import screenFull from 'screenfull'
import { ElMessage } from "element-plus";

const isFullscreen=ref(screenFull.isFullscreen)

onMounted(()=>{
  screenFull.on('change',()=>{
    if(screenFull.isFullscreen) isFullscreen.value=true
    else isFullscreen.value=false
  })
})

const handleFullScreen = () => {
  if (!screenFull.isEnabled) ElMessage.warning("当前您的浏览器不支持全屏 ❌");
  screenFull.toggle();
};
</script>

<template>
  <div class="fullscreen">
    <i :class="['iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon" @click="handleFullScreen"></i>
  </div>
</template>

<style lang="scss" scoped>

</style>
